<template>
  <kt-vo-query :searchProps="voSearchProps" label-width="0" @query="queryDataChanged"></kt-vo-query>
  <el-button type="success" style="margin-top: 10px" size="default" @click="getQueryData">控制台输出表单数据</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VoInput, VoSelect, VoSwitch, VoWrap } from '../../packages/index'

const voSearchProps = ref([
  new VoInput({
    label: '姓名',
    value_key: 'name',
    span: 5,
  }),
  new VoWrap(),
  new VoSelect({
    label: '性别1(字典读取)',
    value_key: 'gender',
    dict: 'gender',
    span: 5,
  }),
  new VoWrap(),
  new VoSelect({
    label: '性别2(数据读取)',
    value_key: 'gender2',
    data: [{ label: '男', value: '1' }, { label: '女', value: '2' }],
    span: 5,
  }),
  new VoWrap(),
  new VoSwitch({
    label: '已婚',
    value_key: 'merried',
    inactive_value: '1',
    active_value: '2',
  })
])

const queryData = ref<any>({})
function queryDataChanged(q = {}) {
  queryData.value = q
}
function getQueryData() {
  console.log(queryData.value)
}
</script>

<style lang="scss" scoped>
</style>